import React, { PureComponent } from 'react'
import store from '../store' 
import { addCounter, subCounter } from '../store/features/counter'
export class Home extends PureComponent {

  constructor(){
    super()
    this.state={
      counter:0
    }
  }
  componentDidMount(){
    // 订阅store
    store.subscribe(()=>{
      const state = store.getState().counter;
      this.setState({
        counter:state.counter
      })
    })
  }

  addNumber(num){
    store.dispatch(addCounter(num))
  }
  subNumber(num){
    store.dispatch(subCounter(num))
  }
  render() {
    const {counter} = this.state;
    return (
      <div>
        <h2>home counter: {counter}</h2>
        <div>
          <button onClick={()=>this.addNumber(1)}>+1</button>
          <button onClick={()=>this.addNumber(-5)}>-5</button>
          <button onClick={()=>this.subNumber(10)}>+10</button>
          <button onClick={()=>this.addNumber(15)}>+15</button>
        </div>
      </div>
    )
  }
}

export default Home